<template >
  <el-progress style="height: 50px; width: 400px" :percentage="p" v-bind="$attrs"></el-progress>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
// 标识动画加载过程中改变的值
let num = ref<number>(0)
let props = defineProps({
  // 进度条进度
  percentage: {
    type: Number,
    required: true
  },
  // 是否有动画效果
  isAnimate: {
    type: Boolean,
    default: false
  },
  // 动画时长(毫秒)
  time: {
    type: Number,
    default: 3000
  },
})
let emits = defineEmits(['finishHandle'])
let p = ref(0)
onMounted(()=>{
  if(props.isAnimate){
    let t = Math.ceil(props.time/props.percentage)
    let timer = setInterval(()=>{
      p.value += 1
      if(p.value >= props.percentage){
        p.value = props.percentage
        emits('finishHandle', true)
        clearInterval(timer)
      }
    },t )
  }
})

</script>

<style lang="scss" scoped>

</style>
